<template>
    <div class="itemDetail">
        <div>
            <div style="position: relative; height: 600px;">
                <div class="item_detail_plane">
                    <div>
                        <img src="./../../assets/itemDetail/001.jpg" alt="">
                    </div>
                    <div>
                        <img src="./../../assets/itemDetail/002.jpg" alt="">
                    </div>
                    <div>
                        <img src="./../../assets/itemDetail/003.jpg" alt="">
                    </div>
                    <div>
                        <img src="./../../assets/itemDetail/004.jpg" alt="">
                    </div>
                    <div>
                        <img src="./../../assets/itemDetail/005.jpg" alt="">
                    </div>
                </div>
                <div class="item_detail_big">
                    <div>
                        <img src="./../../assets/itemDetail/001.jpg" alt="">
                    </div>
                </div>
                <div class="item_detail_form">
                    <table style="width: 550px; font-size: var(--fontsize-14); color: var(--color-font); line-height: 40px;">
                        <tr>
                            <td colspan="2" style="font-size: var(--fontsize-20);">
                                吹吸一体美宠机
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                基本功能：吹毛，吸毛
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div class="cut_line"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                预估毛利
                            </td>
                            <td>
                                预计售价
                            </td>
                        </tr>
                        <tr>
                            <td style="font-size: 30px; font-weight: bold; color: var(--color-base);">
                                40%
                            </td>
                            <td style="font-size: 30px; font-weight: bold; color: var(--color-common-00);">
                                $35.99
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div class="cut_line"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                商品编码
                            </td>
                            <td>
                                4585461771
                            </td>
                        </tr>
                        <tr>
                            <td>
                                推荐市场
                            </td>
                            <td>
                                美国、欧洲
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                专利保护区域
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                产品现有认证
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div class="cut_line"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                颜色
                            </td>
                            <td>
                                <div style="display: flex;">
                                    <div class="item_color" :class="{active_color_active: active_color == '1'}" @click="active_color = '1'">白色</div>
                                    <div class="item_color" :class="{active_color_active: active_color == '2'}" @click="active_color = '2'">黑色</div>
                                    <div class="item_color" :class="{active_color_active: active_color == '3'}" @click="active_color = '3'">红色</div>
                                    <div class="item_color" :class="{active_color_active: active_color == '4'}" @click="active_color = '4'">黄色</div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                数量
                            </td>
                            <td>
                                <el-input-number style="margin: 5px 10px;" v-model="itemNum" :step="1" :min="0" :max="9999" step-strictly size="mini"></el-input-number>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <div style="display: flex;">
                                    <div class="item_color" @click="">加入进货单</div>
                                    <div class="item_color" @click="">立即订购</div>
                                    <div class="item_color active_color_active" @click="">询价</div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div style="color: var(--color-font); margin-top: 10px;">
                <div style="font-size: var(--fontsize-20);">
                    市场卖点
                </div>
                <div>
                    <ul>
                        <li>
                            结合清洗、消毒、烘干和存储于一体
                        </li>
                        <li>
                            专利喷淋技术，上下双旋转喷臂+四定向喷臂，专为清洗奶瓶而设计
                        </li>
                        <li>
                            超大透明视窗，洗涤过程随时监看
                        </li>
                        <li>
                            可移动透明水箱，方便清洁，方便加水
                        </li>
                    </ul>
                </div>
            </div>
            <div style="margin: 40px 0;">
                <el-tabs type="border-card">
                    <el-tab-pane label="产品详情">
                        <el-table :data="tableData" style="width: 100%;" border>
                            <el-table-column prop="code1" label="SKU编码"></el-table-column>
                            <el-table-column prop="code2" label="SKU规格"></el-table-column>
                            <el-table-column prop="code3" label="单品毛重kg"></el-table-column>
                            <el-table-column prop="code4" label="单品净重kg"></el-table-column>
                            <el-table-column prop="code5" label="装箱毛重kg"></el-table-column>
                            <el-table-column prop="code6" label="装箱数量"></el-table-column>
                            <el-table-column prop="code7" label="单品尺寸cm"></el-table-column>
                            <el-table-column prop="code8" label="包装尺寸cm"></el-table-column>
                            <el-table-column prop="code9" label="装箱尺寸cm"></el-table-column>
                        </el-table>	
                        <div>
                            <div style="line-height: 60px;">
                                最终商品规格等参数信息，以实物及合同为准。
                            </div>
                            <div class="cut_line"></div>
                        </div>					
                    </el-tab-pane>
                    <el-tab-pane label="工厂资质">
                        <div style="font-size: var(--fontsize-20);">
                            工厂简介
                        </div>
                        <div>
                            <ul>
                                <li>
                                    结合清洗、消毒、烘干和存储于一体
                                </li>
                                <li>
                                    专利喷淋技术，上下双旋转喷臂+四定向喷臂，专为清洗奶瓶而设计
                                </li>
                                <li>
                                    超大透明视窗，洗涤过程随时监看
                                </li>
                                <li>
                                    可移动透明水箱，方便清洁，方便加水
                                </li>
                            </ul>
                        </div>
                        <div style="font-size: var(--fontsize-20);">
                            实景图片
                        </div>
                        <div>
                            <img style="width: 100%;" src="./../../assets/001.png" alt="">
                        </div>
                    </el-tab-pane>

                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'itemDetail',
    data() {
        return {
            itemNum: 1,
            active_color: "1",
            tableData: [{
                code1:"243220435293",
                code2:"白色",
                code3:"5.50",
                code4:"4.50",
                code5:"-",
                code6:"-",
                code7:"27.5*37.8*41.2",
                code8:"33*45*46",
                code9:"-"
            },{
                code1:"243220435293",
                code2:"黑色",
                code3:"5.50",
                code4:"4.50",
                code5:"-",
                code6:"-",
                code7:"27.5*37.8*41.2",
                code8:"33*45*46",
                code9:"-"
            },{
                code1:"243220435293",
                code2:"红色",
                code3:"5.50",
                code4:"4.50",
                code5:"-",
                code6:"-",
                code7:"27.5*37.8*41.2",
                code8:"33*45*46",
                code9:"-"
            },{
                code1:"243220435293",
                code2:"黄色",
                code3:"5.50",
                code4:"4.50",
                code5:"-",
                code6:"-",
                code7:"27.5*37.8*41.2",
                code8:"33*45*46",
                code9:"-"
            }]
        }
    },
    mounted() {
    },
    methods: {
    }
}
</script>
<style scoped>
.item_detail_plane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
}
.item_detail_plane > div > img {
    width: 80px;
    margin: 9px;
    border: 1px solid var(--color-common-f2);
}
.item_detail_plane_active {
    border: 1px solid var(--color-base);
}
.item_detail_big {
    position: absolute;
    top: 0;
    left: 100px;
}
.item_detail_big > div > img {
    margin: 9px;
    width: 496px;
    height: 496px;
    border: 1px solid var(--color-common-f2);
}
.item_detail_form {
    position: absolute;
    top: 0;
    left: 650px;
}
.item_detail_form table tr {
    margin: 10px 0;
} 
.cut_line {
    width: 500px;
    height: 1px;
    margin: 5px 0;
    background-color: var(--color-common-f2);
}
.item_color {
    margin: 5px 10px;
    padding: 0 10px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: var(--color-common-ff);
    border: 1px solid var(--color-common-f2);
    border-radius: 5px;
    color: var(--color-font);
}
.active_color_active {
    background-color: var(--color-base);
    border: 1px solid var(--color-base);
    color: var(--color-common-ff);
}
</style>